<template>
  <div class="total">
    <div class="hhh">
      <div class="recommend" v-for="(item,index) in goodsList" :key="index">
        <!-- 用于页面跳转传参 -->
        <router-link 
        :to="{name:'Details', 
        params: {
          goodsList:goodsList,
          goodId: item.id,
          goodurl: item.picture,
          goodname: item.name,
          gooddescription: item.description,
          goodprice: item.price,
          lenderId: item.owner_id,
          valuation: item.valuation,
          type: item.type
          }}">
          <ul>
            <li>
              <img :src="item.picture"/>
            </li>
            <li class="introduce">{{item.name}}</li>
            <li class="price">￥{{item.price}}</li>
          </ul>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recommend",
  //进入日用品页面后向后端请求商品信息
  created(){
    var self = this
    this.$axios
    .get(
      '/itemBorrowState?borrow_state=allow_borrow&type=场地'
    )
    .then(function(response){
      // handle success
      console.log(response)
      self.goodsList = response.data
      console.log(self.goodsList)
    })
    .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
      // always executed
    })
  },
  data() {
    return {
      goodsList: {},
      borrowerId: localStorage.getItem("id")
    };
  }
};
</script>

<style scoped>
.total {
  display: flex;
}
.hhh {
  flex-grow: 1;
  margin-bottom: 64px;
}
.recommend {
  margin: 8px;
  display: inline-block;
}
li {
  list-style: none;
}
.recommend img {
  height: 300px;
  text-align: center;
}
.introduce {
  width: 300px;
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.price {
  width: 300px;
  text-align: center;
  font-size: 18px;
  color: #f00;
}
</style>
